<template>
  <a-upload
    name='files'
    :headers='tokenHeader'
    :action='upLoad'
    :file-list='fileList'
    :multiple='false'
    @change='handleImportExcel'
    :before-upload='beforeUpload'
    accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
  >
    <a-button v-if='!isShow'>
      <a-icon type='upload' />
      上传文件
    </a-button>
  </a-upload>
</template>

<script>
import { uploadAction, getAction } from '@/api/manage'
import { ACCESS_TOKEN, TENANT_ID } from '@/store/mutation-types'
import Vue from 'vue'
import { Modal } from 'ant-design-vue'

export default {
  name: 'ZUpload',
  props: ['fileData', 'isShow', 'fileUrl'],
  data() {
    return {
      upLoad: `${window._CONFIG['domianURL']}/${this.fileUrl.saveFile}`,
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'http://www.baidu.com/xxx.png',
        // },
      ]
    }
  },
  computed: {
    //token header
    tokenHeader() {
      let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
      let tenantid = Vue.ls.get(TENANT_ID)
      if (tenantid) {
        head['tenant-id'] = tenantid
      }
      return head
    }
  },
  watch: {
    fileData: {
      handler: function(val) {
        if (val.fileName) {
          this.fileList = [{
            uid: val.affixId,
            name: val.fileName,
            status: 'done',
            url: `${window._CONFIG['domianURL']}/sys/common/download${val.fileUrl}`
          }]
        } else {
          this.fileList = []
        }
      },
      immediate: true
    }
  },
  methods: {
    /* 导入 */
    beforeUpload(file, fileList) {
      this.fileList = [...this.fileList, file]
      if (this.fileList.length > 1) {
         this.fileList.pop()
        this.$message.error('请先删除原文件!')
        return false
      } else {
        return true
      }
    },
    handleImportExcel(info) {
      console.log(222, this.upLoad)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          console.log(555, info.file.response)
          this.$emit('returnFileId', info.file.response.result.id)
          this.$message.success(info.file.response.message || `${info.file.name} 文件上传成功`)
        } else {
          this.$message.error(`${info.file.name} ${info.file.response.message}.`)
        }
      } else if(  info.file.status ==='removed'){
        this.fileList.pop()
        this.$emit('removeFile')
      }else if (info.file.status === 'error') {
        if (info.file.response.status === 500) {
          let data = info.file.response
          const token = Vue.ls.get(ACCESS_TOKEN)
          if (token && data.message.includes('Token失效')) {
            Modal.error({
              title: '登录已过期',
              content: '很抱歉，登录已过期，请重新登录',
              okText: '重新登录',
              mask: false,
              onOk: () => {
                store.dispatch('Logout').then(() => {
                  Vue.ls.remove(ACCESS_TOKEN)
                  window.location.reload()
                })
              }
            })
          }
        } else {
          this.$message.error(`文件上传失败: ${info.file.msg} `)
        }
      }
    },
  }
}
</script>

<style lang='less' scoped>

</style>